<template>
	<view>
		<view class="content">
			<view class="label">
				<view class="label-center">
					<view v-for="(label,index) in labelList" :class="{'on':index==labelIndex}" @tap="loadRatings(index)" :key="label.type">
						{{label.name}}({{label.number}})
					</view>
				</view>
			</view>
			<view class="list">
				<view class="row" v-for="(row,Rindex) in listData" :key="Rindex">
					<view class="left">
						<view class="face">
							<image src="/static/img/defalut_user.png"></image>
						</view>
					</view>
					<view class="right">
						<view class="name-date">
							<view class="username">
								{{row.account}}
							</view>
							<view class="date">
								{{row.c_add_time}}
							</view>
						</view>
						<view class="spec">
							规格: {{row.attribute_val}}
						</view>
						<view class="first">
							<view class="rat">
								{{row.c_content}}
							</view>
							<view class="img-video">
								<view class="box" v-for="(item,ii) in row.c_img_url" @tap="showBigImg(item,row.c_img_url)" :key="ii">
									<image mode="aspectFill" :src="item"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import defalut from '@/components/defalut.vue';
	import loadMore from '@/components/load-more.vue';
	import {pageLoad} from '@/utils/request.js';
	var that;
	export default {
		data() {
			return {
				labelList:[
					{name:'全部',number:0,type:'all'},
					{name:'好评',number:0,type:'good'},
					{name:'中评',number:0,type:'secondary'},
					{name:'差评',number:0,type:'poor'},
					{name:'有图',number:0,type:'img'}
				],
				labelIndex:0,
				gid:"",
				page:1,
				listData:[],
				loadtype:1,
				listnull:false,
				countList:""
			};
		},
		onLoad(option){
			that=this;
			this.gid = option.gid;
			this.getCommentList(true);
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
		},
		methods: {
			getCommentList(isReload){
				let grade = this.labelIndex;
				pageLoad({
					url:"/comment/commentList",
					that: that,
					isReload: isReload,
					data:{
						grade:grade,
						gid:that.gid
					},
					before(res){
						let countList = res.data.countList
						let labelList = that.labelList;
						labelList.forEach((item,index)=>{
							if(index==0){
								item.number = countList['count'].count
							}else{
								item.number = countList['count'+index].count
							}
						})
						res.data= res.data.commentList;
					},
					success(res){
					}
				})
				
			},
			loadRatings(index){
				this.labelIndex = index;
				this.getCommentList(true)
			},
			showBigImg(src,srclist){
				uni.previewImage({
					current:src,
					urls: srclist
				});
			},
		},
		components:{
			defalut,
			loadMore,
		},
		onReachBottom(){
			this.getCommentList(false)
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}

.myVideo{
	position: fixed;
	top: 50%;
	right: 100%;
}
.content{
	view{
		display: flex;
	}
	width: 94%;
	padding: 0 3%;
	
	.label{
		position: fixed;
		top:44px;
		/* #ifdef APP-PLUS */
		top:0;
		/* #endif */
		left:0; z-index: 1;background: #fff; 
		width: 100%;
		.label-center{
			width: 640upx;
			margin:0 auto;
			flex-wrap:wrap;
			view{
				padding: 0 20upx;
				height: 50upx;
				line-height: 50upx;
				border-radius: 40upx;
				border:solid 1px #ddd;
				box-sizing: border-box;
				align-items: center;
				color: #555;
				font-size: 26upx;
				background-color: #f9f9f9;
				margin: 10upx 20upx 10upx 0;
				&.on{
					border:solid 1upx $maincolor;
					color: $maincolor;
				}
			}
		}
		
	}
	.list{
		width: 100%;
		flex-wrap: wrap;
		margin-top: 144upx;
		padding: 20upx 0;
		.row{
			width: 100%;
			margin-top: 30upx;
			.left{
				width: 10vw;
				flex-shrink: 0;
				margin-right: 10upx;
				.face{
					width: 100%;
					image{
						width: 10vw;
						height: 10vw;
						border-radius: 100%;
					}
					
				}
			}
			.right{
				width: 100%;
				flex-wrap: wrap;
				.name-date{
					width: 100%;
					justify-content: space-between;
					align-items: baseline;
					.username{
						font-size: 32upx;
						color: #555;
					}
					.date{
						font-size:28upx;
						color: #aaa;
					}
				}
				.spec{
					width: 100%;
					color: #aaa;
					font-size: 26upx;
				}
				.first{
					width: 100%;
					flex-wrap: wrap;
					.rat{
						font-size: 30upx;
						line-height: 40upx;
						padding: 16upx 0 10upx;
					}
					.img-video{
						width: 100%;
						flex-wrap: wrap;
						.box{
							width: calc((84.6vw - 50upx)/4);
							height: calc((84.6vw - 50upx)/4);
							margin: 5upx 5upx;
							position: relative;
							justify-content: center;
							align-items: center;
							image{
								position: absolute;
								width: 100%;
								height: 100%;
								border-radius: 10upx;
							}
							.playbtn{
								position: absolute;
								.icon{
									font-size: 80upx;
									color: rgba(255,255,255,.9)
								}
							}
						}
					}
				}
				
				.append{
					width: 100%;
					flex-wrap: wrap;
					.date{
						width: 100%;
						height: 40upx;
						border-left: 10upx solid #f06c7a;
						padding-left: 10upx;
						align-items: center;
						font-size: 32upx;
						margin: 20upx 0;
					}
					.rat{
						font-size: 30upx;
					}
					.img-video{
						width: 100%;
						flex-wrap: wrap;
						.box{
							width: calc((84.6vw - 10upx - (10upx * 4))/4);
							height: calc((84.6vw - 10upx - (10upx * 4))/4);
							margin: 5upx 5upx;
							position: relative;
							justify-content: center;
							align-items: center;
							image{
								position: absolute;
								width: 100%;
								height: 100%;
								border-radius: 10upx;
							}
							.playbtn{
								position: absolute;
								.icon{
									font-size: 80upx;
									color: rgba(255,255,255,.9);
								}
							}
						}
					}
				}
			}
		}
	}
}
/*
* <view class="list">
				<view class="row">

					<view class="right">
						
						<view class="spec">
							规格：XL
						</view>
						<view class="first">
							<view class="rat">
								好看，可以，不愧是专业的，才拿到手上就研究了半天才装上
							</view>
							<view class="img-video">
								<view class="box">
									<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
									<view class="playbtn">
										<view class="icon bofang"></view>
									</view>
								</view>
								<view class="box">
									<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
								</view>
								<view class="box">
									<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
								</view>
							</view>
						</view>
						<view class="append">
							<view class="date">
								65天后追加
							</view>
							<view class="rat">
								好看，可以，不愧是专业的，才拿到手上就研究了半天才装上
							</view>
							<view class="img-video">
								<view class="box">
									<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
								</view>
								<view class="box">
									<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			* 
			* */
</style>
